html, body, #app {
    width: 100%; /* 设置页面整体宽度为100% */
    height: 100%; /* 设置页面整体高度为100% */
    overflow: hidden; /* 隐藏页面内容溢出部分 */
}

/*.bg {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background:url(../img/index_bg.png) no-repeat center;*/
/*    background-size: cover;*/
/*    color: #d3d3d3;*/
/*}*/

/* 头部  */
.header-box {
    width: 100%; /* 设置头部宽度为100% */
    height: 70px; /* 设置头部高度为70px */
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 头部内容两侧对齐 */
    text-align: center; /* 文本居中对齐 */
    margin-bottom: 10px; /* 底部外边距为10px */
}

.header-box h2 {
    margin-top: 3px; /* 顶部内边距为3px */
    letter-spacing: 5px; /* 字母间距为5px */
}

/* 主体部分  */
.main {
    width: 100%; /* 设置主体部分宽度为100% */
    height: 100%; /* 设置主体部分高度为100% */
    display: grid; /* 使用grid布局 */
    grid-template-columns: 1fr 4fr; /* 定义网格列布局，比例为1:4 */
    grid-template-rows: 1fr 3fr 2fr; /* 定义网格行布局，比例为1:3:2 */
    gap: 10px; /* 网格间隙为10px */
}

.main div:nth-child(1) {
    grid-column: 1/3; /* 第一个子元素跨越两列 */
}

.main div:nth-child(2) {
    grid-row: 2/4; /* 第二个子元素跨越从第二行到第四行 */
}

/* 第一个模块  */
.modulefirst {
    height: 100%; /* 设置第一个模块高度为100% */
    background: rgba(6, 30, 60, .5); /* 设置背景颜色为半透明的深蓝色 */
}

.modulefirst ul {
    width: 100%; /* 设置ul宽度为100% */
    height: 100%; /* 设置ul高度为100% */
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 子元素两侧对齐 */
    align-items: center; /* 子元素垂直居中对齐 */
}

.modulefirst ul li {
    flex: 1; /* 子元素均分空间 */
    height: 80%; /* 子元素高度为父元素的80% */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 子元素垂直方向排列 */
    justify-content: center; /* 子元素垂直居中对齐 */
    align-items: center; /* 子元素水平居中对齐 */
    border-left: 2px solid #08395A; /* 左边框为2px实线，颜色为深蓝色 */
    border-right: 2px solid #08395A; /* 右边框为2px实线，颜色为深蓝色 */
}

.modulefirst-title {
    font-size: 20px; /* 设置标题字体大小为20px */
    margin-bottom: 20px; /* 底部外边距为20px */
}

.modulefirst-num {
    font-size: 30px; /* 设置数字字体大小为30px */
    font-weight: 600; /* 设置数字字体加粗 */
}

.modulefirst-unit {
    margin-left: 10px; /* 左侧外边距为10px */
}

.modulefirst ul li:nth-child(3n+1) .modulefirst-num {
    color: #458AE6; /* 每第3个li元素的数字字体颜色为浅蓝色 */
}

.modulefirst ul li:nth-child(3n+2) .modulefirst-num {
    color: #F46827; /* 每第3个li元素的数字字体颜色为橙色 */
}

.modulefirst ul li:nth-child(3n+3) .modulefirst-num {
    color: #40FAEE; /* 每第3个li元素的数字字体颜色为青色 */
}

/* 边框样式  */
.bgstyle {
    height: 100%; /* 设置高度为100% */
    background-color: #0D2049; /* 设置背景颜色为深蓝色 */
    border-top: 2px solid #0B3E6B; /* 顶部边框为2px实线，颜色为深蓝色 */
}

/* 第三个模块  */
.modulethird {
    display: flex; /* 使用flex布局 */
}

.modulethird-left {
    flex: 0 1 60%; /* 左侧占据60%的空间 */
}

.modulethird-right {
    flex: 0 1 40%; /* 右侧占据40%的空间 */
}

/* 水位图  */
.waterpond {
    width: 100%; /* 设置宽度为100% */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 子元素居中对齐 */
}

.waterpond-title {
    font-size: 20px; /* 设置标题字体大小为20px */
    margin: 10px 0; /* 上下外边距为10px，左右外边距为0 */
    font-weight: 600; /* 设置标题字体加粗 */
}

.waterpond-detail {
    font-weight: 600; /* 设置文本字体加粗 */
    padding: 0 10px; /* 上下内边距为0，左右内边距为10px */
}

.waterpond-detail span {
    color: #F46827; /* 设置span元素文字颜色为橙色 */
    font-size: 30px; /* 设置span元素文字大小为30px */
}

/* 第四个模块 */
.modulefourth-list ul {
    display: flex; /* 使用flex布局 */
    width: 100%; /* 设置宽度为100% */
    gap: 10px; /* 元素之间间隔为10px */
}

.modulefourth-list ul li {
    flex: 1; /* 子元素均分空间 */
    display: flex; /* 使用flex布局 */
}

.peichart {
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直方向排列 */
    width: 100%; /* 设置宽度为100% */
}

.peichart h2 {
    padding: 5px; /* 内边距为5px */
}

.map-container {
    width: 100%; /* 保持宽度为 100% */
    height: 100%;

}


/*      gepDev3页面的css代码         */

/*      第一层     */
.gep3-index-box {
    width: 100%;
    height: calc(100% - 100px);
    display: flex;
    justify-content: space-between;

}

.layer1-left {
    width: 100%;
    height: 100%;
    flex: 5;

}

.layer1-right {
    width: 100%;
    height: 100%;
    flex: 2;

}

/*      第2层  左    */
.gep-layer2-left {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.layer2-left-top {
    width: 100%;
    height: 100%;
    flex: 2;
    /*border: 1px red solid;*/
    display: flex;
    flex-direction: column;
    background-color: #0c133b;

}

.layer2-left-bottom {
    width: 100%;
    height: 100%;
    flex: 4;

}

/*      第2层  右    */
.gep-layer2-right {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;


}

.layer2-right-top {
    width: 100%;
    height: 100%;
    flex: 1;
    background-color: #0c133b;
}

.layer2-right-bottom {
    width: 100%;
    height: 100%;
    flex: 1;
    background-color: #0c133b;
}


/*      第3层      */

.layer3-left-bottom {
    width: 100%;
    height: 100%;
    display: flex;
}

.layer3-left-bottom-left {
    width: 100%;
    height: 100%;
    flex: 1;

    background-color: #0c133b;
}

.layer3-left-bottom-right {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    background-color: #0c133b;
    /*border: 1px red solid;*/
}

.gep-map-container {
    width: 100%; /* 保持宽度为 100% */
    height: 100%;

}

.gepTifImg {
    width: 100%;
    height: 100%;
}

.displayedImage {
    width: 85%;
    height: 85%;
    position: relative;
    left: 8%; /* 相对于其正常位置向右移动 20px */
}




/*      homepageDev2页面的css代码         */


/*      vepDev4页面的css代码         */

/*.input-container {*/
/*    !*border: 1px red solid;*!*/
/*    background-color: rgba(10, 14, 66, 0.82);*/

/*}*/

/*      gepDev4页面的css代码         */

/*      第一层     */


/*      第2层  右    */
.gepD4-layer2-right {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.gepD4-layer2-right-top {
    width: 100%;
    height: 100%;
    flex: 3;
    /*border: 1px red solid;*/
    display: flex;
    flex-direction: column;
    background-color: #0c133b;
    /*border: 1px red solid;*/
}

.gepD4-layer2-right-bottom {
    width: 100%;
    height: 100%;
    flex: 4;
    /*border: 1px red solid;*/
    background-color: #040a3b;
}




/*      userLogin页面的css代码         */


.login-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 使容器铺满整个视口 */
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    /*align-items: flex-start; !* 垂直方向上靠上对齐，默认对齐方式是居中 *!*/
}

.login-container::before {
    content: ''; /* 必须有内容 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: url("@/assets/img/shangluo-bg.jpg") no-repeat center center fixed;*/
    background: url("@/assets/img/yanshan_login_bg.jpg") no-repeat center center fixed;

    background-size: cover; /* 确保背景图片能够填满容器 */
    transform: scaleX(-1); /* 水平反转背景图片 */
    z-index: -1; /* 将伪元素置于容器底层，确保不遮挡实际内容 */
}

.login-top {
    /* 登录页标题字的设置区域*/
    /*border: 1px red solid;*/
    flex: 2; /* 左侧占据 1/2 的宽度 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 将内容排列到底部 */
    align-items: center;
    height: 100%; /* 确保它充满父容器的高度 */
    margin-bottom: 60px; /* 与下方内容有一定的间距 */

}


.login-main-title {
    /*border: 1px red solid;*/
    font-size: 88px;
    text-align: right;
    margin-bottom: 20px;
    float: right;
    color: white; /* 左侧内容文字颜色 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), /* 主要阴影 */ -1px -1px 2px rgba(0, 0, 0, 0.5); /* 轻微的反向阴影 */
}

.login-zh-title {
    font-size: 44px;
    font-weight: bold; /* 加粗 */
    letter-spacing: 6px;  /* 调整字母间距，值可以根据需要增大 */
    color: rgba(255, 255, 255, 0.93); /* 左侧内容文字颜色 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), /* 主要阴影 */ -1px -1px 2px rgba(0, 0, 0, 0.5); /* 轻微的反向阴影 */
    /*border: 1px red solid;*/

}

.login-en-title {
    font-size: 28px;
    margin: 0;
    color: rgba(255, 255, 255, 0.91); /* 左侧内容文字颜色 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), /* 主要阴影 */ -1px -1px 2px rgba(0, 0, 0, 0.5); /* 轻微的反向阴影 */


    /*border: 1px red solid;*/
}


.login-bottom {
    flex: 3; /* 右侧占据 1/2 的宽度 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 将内容排列到底部 */
    align-items: center;
    /*margin-bottom: 30px; !* 与下方内容有一定的间距 *!*/
    /*border: 1px red solid;*/
}

.login-form {
    background-color: rgba(255, 255, 255, 0.5); /* 表单背景色，带有透明度 */
    padding: 20px;
    width: 500px;
    height: 230px;
    /*box-shadow: 3px 3px 10px 10px #0000004d;*/
    border-radius: 5px;
    background-color: #0a153880;

}

.transparent-input {
    background-color: transparent !important; /* 使输入框透明 */
    /*border: 1px solid #ccc; !* 添加输入框边框 *!*/
    /*border-radius: 3px;*/
    padding: 10px;
}


.login-button {
    width: 100%; /* 让按钮宽度与输入框相同 */
    margin-top: 15px; /* 调整按钮与输入框的间距 */
    padding: 10px;
    background-color: #0dff92;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.login-message {
    margin-top: 20px;
    color: red;
    font-size: 14px;
}


/*问号弹窗显示的设置*/
.info-icon {
    cursor: pointer;
    position: relative; /* 定位参考点 */
    display: inline-block; /* 确保 span 是行内块级元素 */
    margin-left: 5px; /* 控制问号图标与输入框之间的间距 */
}

.tooltip {
    position: absolute; /* 绝对定位 */
    background-color: #fff; /* 背景颜色 */
    border: 1px solid #ccc; /* 边框 */
    padding: 5px; /* 内边距 */
    border-radius: 5px; /* 边框圆角 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 阴影 */
    font-size: 12px; /* 字体大小 */
    color: #333; /* 字体颜色 */
    white-space: nowrap; /* 防止文本换行 */
    z-index: 1000; /* 确保在最上层 */
    left: 100%; /* 显示在图标的右侧 */
    top: 50%; /* 垂直居中对齐 */
    transform: translateY(-50%); /* 垂直居中 */
    margin-left: 5px; /* 与图标的间距 */
}

@font-face {
    font-family: '优设标题黑';
    src: url('@/assets/font/YouSheBiaoTiHei-2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

